<template>
  <div class="hello">
    <h3>各种表单的v-model</h3>
    <div><label>{{text}}：<input type="text" v-model="text"></label></div>
    <div><label>{{radio}}：<input type="radio" v-model="radio" value="radio1"><input type="radio" v-model="radio" value="radio2"></label></div>
    <div>{{select}}：<select v-model="select">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
      </select>
    </div>
    <div>{{checkbox}}：
      <label><input type="checkbox" value="checkbox1" v-model="checkbox"></label>
      <label><input type="checkbox" value="checkbox2" v-model="checkbox"></label>
    </div>
    <div>{{checkArr}}：
      <label><input type="checkbox" value="apple" v-model="checkArr">apple</label>
      <label><input type="checkbox" value="boy" v-model="checkArr">boy</label>
      <label><input type="checkbox" value="cat" v-model="checkArr">cat</label>      
    </div>
<hr>
    <div>
      <h3>动态生成option,并选中v-model绑定值</h3>
      <select v-model="selected">
        <option v-for="option in options" :value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    <div>
      <h3>切换选中和未选中的值</h3>
      <label>{{toggle}}：<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"></label>
    </div>
<hr>
  <div>
    <h3>v-model的修饰符</h3>
    <ul>
      <li>{{lazyText}}:将input事件改成change事件,只有输入框失去焦点时才能触发change事件
        <input type="text" v-model.lazy="lazyText">
      </li>
      <li>number修饰符:将值转成数字类型。如果转换后为NaN，则返回原值
        <input type="text" v-model.number="num"> <button @click="showType()">showType</button>
      </li>
      <li>trim修饰符:输入框失去焦点后去除空格符
        <input type="text" v-model.trim="trimText">
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      text: 'input text',
      radio: 'radio text',
      select: 'option3', // 若option中有option的value和初始值匹配，则会默认选中该option
      checkbox: false,
      checkArr: [],

      selected: 'B',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ],
    // 勾选切换值  
      toggle: 'origin value', // 如果初始值为true value,则默认选中
      a:'true value',
      b:'false value',
    // 修饰符
      lazyText:'lazy修饰符',
      num: '66',
      trimText: '      我左边有空格'
    }
  },
  methods: {
    showType(){
      console.log(typeof(this.num));
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
